<template>
	<view class="withdraws">
		<!-- 选择地址 -->
		<view class="address-box">
			<view class="user-box flex" @click="clickToAddress">
				<view v-if="!address1.id" class="fdjkh">
					<u-icon style="margin-right: 10rpx;" name="map"></u-icon>
					请选择地址
				</view>
				<view class="lift-box" v-else>
					<view class="sdfkj">
						<view class="topere">
							<text class="text1">{{ address1.name }}</text>
							<text class="text2">{{ address1.phone }}</text>
						</view>
						<view class="buttonee">
							{{ address1.province }}&nbsp;&nbsp;&nbsp;{{ address1.city }}&nbsp;&nbsp;&nbsp;{{ address1.area }}&nbsp;&nbsp;&nbsp;{{ address1.address }}
						</view>
					</view>
				</view>
				<u-icon v-if="address1.id" name="arrow-right" style="color: #00aaff;margin-top: -15rpx;"></u-icon>
			</view>
			<view class="bar">
				<view class="left">备注:</view>
				<view class="right"><input class="right_input" type="text" placeholder="请输入" v-model="remark" maxlength="50" /></view>
			</view>

			<view class="withdraw_btn"><button type="default" class="btn" @click="submitData">申请</button></view>
		</view>
	</view>
</template>

<script>
import navCom from '@/components/navCom/navCom.vue';
import { getshippingaddressApi } from '@/api/myinter.js';
import { getwithdrawalApi, getAddressApi, applicationApi } from '@/api/home.js';
import { createNamespacedHelpers } from 'vuex';
import { submitDeviceData } from '@/api/device.js';
const { mapActions, mapState, mapMutations } = createNamespacedHelpers('address');
export default {
	components: {
		navCom
	},
	data() {
		return {
			ChooseAccount: false, //控制是否显示
			paypassword: false, //支付模态框
			balance: 0, //余额
			minimum: 0, //最低提现金额
			showMoney: 0, //展示金额
			fixedAmount: 0, //提现展示固定金额
			service_amount: 0, //设置手续费固定金额
			service_fee: 0, //设置手续费百分比
			service_all: 0, //设置手续费百分比+固定金额
			singleWithdrawalMaximum: 0, //最高提现金额
			withdrawalType: 'AMOUNT', //AMOUNT, RATE ALL 表示为提现固定手续费和提现手续费比例以及比例加固定金额
			serviceCharge: true, //手续费开关
			withdrawalSwitch: true, //提现开关
			withdraw: null, //提现金额
			addressArr: [], //银行卡数组
			addressId: 0, //选择卡号
			addressList: [], //选择后的卡号数组
			commission: 0,
			checked: false,
			address: {},
			address1: {},
			remark:''
		};
	},
	onLoad(option) {
		// console.log(6666, option)
		if (option) {
			this.address1.id = option.id;
			this.address1.default = option.default;
			this.address1.province = option.province;
			this.address1.city = option.city;
			this.address1.area = option.area;
			this.address1.address = option.address;
			this.address1.name = option.name;
			this.address1.phone = option.phone;
		}
	},
	created() {
		this.getinfo();
		this.getAddress();
	},
	destroyed() {
		this.address1 = {};
	},
	methods: {
		// radio切换
		changeRadio() {
			this.checked = !this.checked;
		},
		goAgreement() {
			wx.navigateTo({
				url: '/pages/my/agreement'
			});
		},
		...mapActions(['getUserData', 'getPersonalData']),
		// 添加银行卡
		addCard() {
			uni.navigateTo({
				url: '/pages/my/addCard'
			});
		},
		clickToAddress() {
			uni.redirectTo({
				url: '/pages/my/applyAddress'
			});
		},
		//提交
		async submitData() {
			if (this.address1.id === '' || this.address1.id == null || this.address1.id == 'undefined') {
				uni.showToast({
					title: '请选择地址',
					icon: 'none'
				});
				return;
			}
			if (this.remark === '' || this.remark == null || this.remark == 'undefined') {
				uni.showToast({
					title: '请填写备注',
					icon: 'none'
				});
				return;
			}
			let params = {
				addressId:this.address1.id,
				 remark:this.remark
			}
			const res = await submitDeviceData(params)
			// console.log(333,res)
			if(res.statusCode==200&&res.data.code==0){
				uni.showToast({
					title: res.data.message,
					icon: 'none',
					duration: 1500
				});
				uni.redirectTo({
					url:'../myTerminal'
				})
			}else{
				uni.showToast({
					title: res.data.message,
					icon: 'none',
					duration: 1500
				});
			}
		},
		// 确认提现
		// confirmWithDraw() {
		// 	if (this.withdrawalSwitch) {
		// 		if (this.withdraw === '') {
		// 			uni.showToast({
		// 				title: "请输入金额",
		// 				icon: "none"
		// 			})
		// 			return
		// 		} else if (this.addressArr.length === 0) {
		// 			uni.showToast({
		// 				title: "请选择要提现的银行卡",
		// 				icon: "none"
		// 			})
		// 			return
		// 		} else if (this.withdraw > this.singleWithdrawalMaximum) {
		// 			uni.showToast({
		// 				title: "输入金额超过可提现金额",
		// 				icon: "none"
		// 			})
		// 			return
		// 		} else if (this.checked === false) {
		// 			uni.showToast({
		// 				title: "请勾选用户协议",
		// 				icon: "none"
		// 			})
		// 			return
		// 		} else {
		// 			if (this.balance <= this.withdraw) {
		// 				switch (this.withdrawalType) {
		// 					case "AMOUNT":
		// 						this.showMoney = this.withdraw - this.service_amount - 0
		// 						break;
		// 					case "RATE":
		// 						this.showMoney = this.withdraw - this.commission - 0
		// 						break;
		// 					case "ALL":
		// 						this.showMoney = this.withdraw - this.commission - 0
		// 						break;
		// 					default:
		// 						break;
		// 				}
		// 			} else {
		// 				this.showMoney = this.withdraw
		// 			}
		// 			this.paypassword = true
		// 		}
		// 	} else {
		// 		uni.showToast({
		// 			title: "暂无法提现!",
		// 			icon: "none"
		// 		})
		// 	}
		// },
		chosepay() {
			this.paypassword = false;
		},
		// 计算百分比的费用
		getcommin() {
			if (this.withdraw > this.balance) {
				uni.showToast({
					title: '提现金额不能大于可提现金额',
					icon: 'none'
				});
				this.withdraw = '';
				return;
			}
			if (this.withdraw < 0) {
				uni.showToast({
					title: '提现金额不能小于零',
					icon: 'none'
				});
				this.withdraw = '';
				return;
			}
			if (this.withdraw === '') {
				this.commission = 0;
				return;
			}
			if (this.withdrawalType === 'RATE' && this.serviceCharge) {
				this.commission = parseFloat(((parseFloat(this.withdraw) * 100000 * parseFloat(this.service_fee)) / 100 / 100000).toFixed(2));
			}
			if (this.withdrawalType === 'ALL' && this.serviceCharge) {
				this.commission = parseFloat(parseFloat(this.withdraw) * parseFloat(this.service_all / 100) + this.fixedAmount - 0);
			}
		},
		// 打开选择银行卡
		choseCard() {
			this.ChooseAccount = true;
		},
		// 关闭选择银行卡
		closeup() {
			this.ChooseAccount = false;
		},
		// 选择卡号
		chosecard(id) {
			this.addressId = id;
		},
		// 确定银行卡
		okCard() {
			this.ChooseAccount = false;
			this.addressList = this.addressArr.filter((item, index) => item.id === this.addressId);
		},
		// 获取输入密码值
		async getValue(e) {
			let _this = this;
			let params = {
				amount: this.withdraw,
				memberBankId: this.addressId,
				payPassword: e
			};
			uni.showLoading({
				title: '正在加载中....',
				mask: true
			});
			const res = await applicationApi(params).catch(e => {
				if (e.statusCode === 400) {
					setTimeout(() => {
						_this.getNewData();
					}, 1500);
				}
			});
			if (res.statusCode === 200) {
				uni.hideLoading();
				uni.showToast({
					mask: true,
					title: '提现成功！',
					icon: 'success',
					success() {
						setTimeout(() => {
							_this.getNewData();
						}, 1000);
					}
				});
			}
		},
		getNewData() {
			this.paypassword = false;
			this.getinfo();
			this.getPersonalData();
			this.getUserData();
			this.withdraw = null;
		},
		// 获取信息数据
		async getinfo() {
			uni.showLoading({
				title: '正在加载中....'
			});
			const res = await getwithdrawalApi({});
			if (res.statusCode === 200) {
				uni.hideLoading();
				this.balance = res.data.data.balance;
				this.minimum = res.data.data.minimum || 1;
				this.singleWithdrawalMaximum = res.data.data.singleWithdrawalMaximum;
				this.withdrawalType = res.data.data.withdrawalType;
				this.serviceCharge = res.data.data.serviceCharge;
				this.withdrawalSwitch = res.data.data.withdrawalSwitch;
				let chargeRate = res.data.data.chargeRate || 0;
				let chargeAmount = res.data.data.chargeAmount || 0;
				if (this.withdrawalType == 'RATE') {
					this.service_fee = chargeRate.toString();
				}
				if (this.withdrawalType == 'AMOUNT') {
					this.service_amount = chargeRate.toString();
				}
				if (this.withdrawalType == 'ALL') {
					this.service_all = chargeRate.toString();
					this.fixedAmount = chargeAmount;
				}
			}
		},
		// 全部提现
		goAllMoney() {
			this.withdraw = this.balance;
			this.getcommin();
		},
		// 获取银行卡列表
		async getAddress() {
			uni.showLoading({
				title: '正在加载中....'
			});
			const res = await getshippingaddressApi({});
			if (res.statusCode === 200) {
				uni.hideLoading();
				//debugger;
				this.addressArr = res.data.data;
				this.addressList = res.data.data.filter((item, index) => {
					if (index === 0) {
						this.addressId = item.id;
						this.address = item;
						return item;
					}
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #ffffff;
	background-size: 100%;
}
.withdraws {
	width: 100%;
	background: #fafafa;

	.addcar_box {
		width: 100%;
		height: 200rpx;
		background: #ffffff;

		.addcar_box_txt {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: 400;
			color: #000000;
		}

		.arrive-card {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: 400;
			color: #000000;

			.na {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}
		}
	}

	.amount_box {
		width: 100%;
		height: 260rpx;
		background: #ffffff;

		.amount_box_num {
			width: 100%;
			height: 80rpx;
			line-height: 100rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #000000;
		}

		.amount_box_inp {
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #e8e8e8;

			.money_icon {
				width: 28rpx;
				height: 35rpx;
				line-height: 20rpx;
				font-size: 48rpx;
				font-weight: bold;
				color: #000000;
			}

			.txt {
				width: 140rpx;
				height: 100%;
				line-height: 120rpx;
				text-align: right;
				font-size: 26rpx;
				font-weight: 400;
				color: #f05329;
			}

			.inp {
				width: 480rpx;
				height: 100%;
			}

			.pla {
				font-size: 26rpx;
				font-weight: 400;
				color: #b3b3b3;
			}
		}

		.poundage_box {
			width: 100%;
			height: 60rpx;
			line-height: 50rpx;
			text-align: right;
			font-size: 22rpx;
			font-weight: 400;
			color: #757575;
		}
	}

	.withdraw_btn {
		width: 100%;
		height: 500rpx;
		position: relative;

		.btn {
			width: 690rpx;
			height: 88rpx;
			background: #f05329;
			border-radius: 10rpx;
			font-size: 38rpx;
			line-height: 88rpx;
			font-weight: 500;
			color: #ffffff;
			position: absolute;
			left: 30rpx;
			bottom: 0rpx;
		}
	}

	.radio-btn {
		width: 100%;
		height: 80rpx;
		position: absolute;
		left: 15rpx;
		bottom: 40rpx;
	}

	.screen_box {
		width: 750rpx;
		height: auto;
		min-height: 850rpx;
		background: #ffffff;

		.screen_box_tlt {
			width: 100%;
			height: 70rpx;
			display: flex;
			align-items: center;

			.tlt {
				width: 90%;
				height: 100%;
				text-align: center;
				line-height: 80rpx;
				font-size: 34rpx;
				font-weight: 500;
				color: #000000;
				padding-left: 70rpx;
			}
		}

		.list_box {
			width: 100%;
			height: 560rpx;
		}

		.screen_box_ul {
			width: 100%;
			height: 120rpx;
			border-bottom: 1rpx solid #e8e8e8;
			display: flex;
			align-items: center;

			.li_box {
				width: 85%;
				height: 100%;
				line-height: 120rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #515151;
			}

			.img_fir {
				width: 40rpx;
				height: 40rpx;
			}

			.img_check {
				width: 30rpx;
				height: 28rpx;
			}
		}

		.screenBtn_box {
			width: 100%;
			height: 88rpx;

			.screenBtn {
				width: 690rpx;
				height: 88rpx;
				margin: auto;
				background: #f05329;
				border-radius: 10rpx;
				font-size: 38rpx;
				font-weight: 500;
				color: #ffffff;
				text-align: center;
				line-height: 88rpx;
			}
		}
	}

	.pay_box {
		width: 640rpx;
		height: 586rpx;
		background: #ffffff;

		.pay_box_tlt {
			width: 100%;
			height: 125rpx;
			display: flex;
			align-items: center;

			.pay_box_tlt_txt {
				width: 90%;
				height: 100%;
				text-align: center;
				line-height: 125rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #000000;
			}
		}

		.pay_box_num {
			width: 100%;
			height: 140rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.name {
				font-size: 26rpx;
				font-weight: 400;
				color: #000000;
			}

			.num {
				font-weight: bold;
				color: #000000;
			}
		}

		.bor {
			width: 100%;
			height: 1rpx;
			background: #f2f2f2;
		}

		.pay_box_li {
			width: 100%;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0rpx 30rpx;

			.li_name {
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
			}

			.li_num {
				font-size: 24rpx;
				font-weight: 500;
				color: #000000;
			}
		}
	}
}

.address-box {
	border-radius: 40rpx;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	overflow: hidden;
	background: #fff;
	margin-bottom: 20rpx;
	color: #666;
}

.address-item {
	font-weight: normal;
	letter-spacing: 1rpx;
}

.user-box {
	padding: 32rpx;
	display: flex;
	justify-content: space-between;
	background-color: #ffffff;
	padding-bottom: 30rpx;
	.fdjkh {
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
	}
	.lift-box {
		height: 250rpx;
		width: 90%;
		padding-top: 25rpx;
		padding-button: 25rpx;
		.topere {
			height: 100rpx;
			display: flex;
			line-height: 100rpx;
			.text1 {
				color: #000000;
				font-size: 32rpx;
			}
			.text2 {
				color: #757575;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}
		.buttonee {
			height: 90rpx;
			color: #515151;
			display: flex;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			flex-wrap: wrap;
			padding-top: 15rpx;
		}
	}
}

.user-address-detail {
	color: #333;
	font-size: 38rpx;
	font-weight: bold;
	margin: 20rpx 0;
	letter-spacing: 1rpx;
}

.mobile {
	margin-left: 20rpx;
}

.bar {
	height: 100rpx;
	overflow: hidden;
	width: 100%;
	display: flex;
	.left {
		height: 100rpx;
		line-height: 100rpx;
		width: 12%;
		text-align: left;
		margin-left: 35rpx;
		font-size: 32rpx;
		color: #000000;
	}
	.right {
		text-align: left;
		height: 100rpx;
		line-height: 100rpx;
		width: 88%;
		padding-right: 40rpx;
		.right_input {
			padding-left: 30rpx;
			height: 60rpx;
			margin-top: 20rpx;
			border-radius: 16rpx;
			border: 1rpx solid #b3b3b3;
		}
	}
}
</style>
